<template>
  <div style="position: relative">
    <div
      style="display: flex; flex-direction: column; justify-content: center"
      v-if="tableif == false"
    >
      <img
        src="../../assets/images/404.png"
        style="height: 150px; width: 250px; margin: auto"
      />
      <div style="display: flex; margin: auto">
        <p>需先填写收(付)款类型、合同总额</p>
        <p
          style="color: rgb(77, 173, 249); cursor: pointer"
          @click="goToFirst()"
        >
          前往填写
        </p>
      </div>
    </div>
    <div v-if="tableif !== false">
      <div style="display: flex; align-items: center">
        <div style="margin: 10px 20px">收（付）款类型:</div>
        <el-tag :type="PaymentTypeType">{{ PaymentType }}</el-tag>

        <div style="margin: 10px 20px">合同总额(元):</div>
        {{ contractaAmount }}

        <div style="margin: 10px 20px">原合同金额(元):</div>
        {{ originalContract }}

        <div style="margin: 10px 20px">附件金额(元):</div>
        {{ appendix }}

        <div style="margin: 10px 20px">未收(付)金额(元):</div>
        {{ AmountNot }}

        <div style="margin: 10px 20px">收付款状态:</div>
        <el-tag :type="PaymentStateType">{{ PaymentState }}</el-tag>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%; border: 1px solid #ccc; border-radius: 5px"
        :fit="true"
        stripe
        header-align="center"
        max-height="300"
        :header-cell-style="{
          background: 'rgb(224, 241, 255)',
          color: '#606266',
        }"
      >
        <el-table-column type="index" label="序号" align="center" />
        <el-table-column
          v-for="(item, index) in tableItem"
          :key="index"
          :prop="item.prop"
          align="center"
        >
          <template #header>
            <i v-show="item.request" style="color: #f56c6c">*</i>
            <span>{{ item.text }}</span>
          </template>
          <template v-slot="scope">
            <el-form :model="form" ref="windowForm" class="demo-dynamic">
              <el-form-item
                :prop="item.prop"
                :rules="item.rules"
                v-if="item.type === 'input'"
              >
                <el-input v-model="scope.row[item.prop]" />
              </el-form-item>
              <el-form-item
                :prop="item.prop"
                :rules="item.rules"
                v-if="item.type === 'DatePicker'"
              >
                <el-date-picker
                  v-model="scope.row[item.prop]"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                />
              </el-form-item>
              <el-form-item
                :prop="item.prop"
                :rules="item.rules"
                v-if="item.type === 'select'"
              >
                <el-select v-model="scope.row[item.prop]" placeholder="请选择">
                  <el-option
                    v-for="element in item.options"
                    :key="element[item.value]"
                    :label="element[item.label]"
                    :value="element[item.value]"
                  />
                </el-select>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <svg-icon
              class-name="icon"
              icon-class="stop"
              style="cursor: pointer"
              v-if="scope.$index !== 0"
              @click="DeleteByIndex(scope.$index)"
            />
          </template>
        </el-table-column>
      </el-table>
      <div
        style="
          display: flex;
          margin-left: 20px;
          width: 100%;
          cursor: pointer;
          align-items: center;
          margin-bottom: 45px;
        "
        @click="periodsNumber()"
      >
        <svg-icon
          class-name="icon"
          icon-class="add"
          style="transform: scale(1.2)"
        />
        <p style="margin-left: 10px; font-size: 15px; color: rgb(25, 149, 247)">
          增加期数
        </p>
      </div>
      <div>
        <div style="display: flex; align-items: center">
          <div
            style="
              background-color: #39f;
              width: 4px;
              height: 20px;
              margin-right: 10px;
              border-radius: 3px;
            "
          ></div>
          <div style="font-size: large">发票附件</div>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            overflow: auto;
            width: 600px;
          "
        >
          <div v-for="(item, index) in AttachmentList" :key="index">
            <div class="bill">
              <svg-icon
                class-name="icon"
                icon-class="bill"
                style="width: 20px; height: 20px; margin-right: 5px"
              />{{ item.code }}
              <div class="Mask">
                <svg-icon
                  class-name="icon"
                  icon-class="see02"
                  style="
                    width: 20px;
                    height: 20px;
                    margin-right: 5px;
                    cursor: pointer;
                  "
                  @click="Preview(item.pdfAddress)"
                />
                <svg-icon
                  class-name="icon"
                  icon-class="copy02"
                  style="
                    width: 20px;
                    height: 20px;
                    margin-right: 5px;
                    cursor: pointer;
                  "
                  @click="copyToClipboard(item.code)"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contractaAmount: this.contractaAmount,
      originalContract: this.originalContract,
      appendix: this.appendix,
      AmountNot: this.AmountNot,
      PaymentType: this.PaymentType,
      PaymentState: this.PaymentState,
      AttachmentList: this.AttachmentList,
      // [
      //   {
      //     code: "ddfffddd",
      //     url: "https://sdevenfangyi.oss-cn-shanghai.aliyuncs.com/cms/contract/1729581921716-527150619.pdf",
      //   },
      // ],
      form: this.form,
      tableItem: this.tableItem,
      PaymentStateType: this.PaymentStateType,
      PaymentTypeType: this.PaymentTypeType,
      tableif: this.tableif,
      // [
      //   {
      //     text: "名称",
      //     prop: "name",
      //     request: true,
      //     type: "input",
      //     rules: [{ required: true, message: "请输入名称", trigger: "blur" }],
      //   },
      //   {
      //     text: "日期",
      //     prop: "date",
      //     request: true,
      //     type: "DatePicker",
      //     rules: [{ required: true, message: "请选择日期", trigger: "blur" }],
      //   },
      //   {
      //     text: "地址",
      //     prop: "address",
      //     request: true,
      //     type: "select",
      //     label: "label",
      //     value: "value",
      //     options: [
      //       { value: "1", label: "黄金糕" },
      //       { value: "2", label: "双皮奶" },
      //     ],
      //     rules: [{ required: true, message: "请选择地址", trigger: "blur" }],
      //   },
      //   {
      //     text: "地址",
      //     prop: "address",
      //     request: true,
      //     type: "select",
      //     label: "label",
      //     value: "value",
      //     options: [
      //       { value: "1", label: "黄金糕" },
      //       { value: "2", label: "双皮奶" },
      //     ],
      //     rules: [{ required: true, message: "请选择地址", trigger: "blur" }],
      //   },
      // ],
      tableData: this.tableData,
      // [
      //   { name: "1", date: "1", address: "1" },
      //   { name: "1", date: "1", address: "1" },
      //   { name: "1", date: "1", address: "1" },
      //   { name: "1", date: "1", address: "1" },
      //   { name: "1", date: "1", address: "1" },
      //   { name: "1", date: "1", address: "1" },
      // ],
    };
  },
  props: {
    //组件显示条件
    tableif: {
      type: String,
      required: true,
    },
    //列表数据
    tableData: {
      type: Array,
      required: true,
    },
    //列表项
    tableItem: {
      type: Array,
      required: true,
    },
    //表单数据
    form: {
      type: Object,
      required: true,
    },
    //发票附件列表
    AttachmentList: {
      type: Array,
      require: true,
    },
    //收付款状态
    PaymentState: {
      type: String,
      require: true,
    },
    //收付款类型
    PaymentType: {
      type: String,
      require: true,
    },
    //未收(付)金额(元)
    AmountNot: {
      type: String,
      require: true,
    },
    //附件金额
    appendix: {
      type: String,
      require: true,
    },
    //合同总额(元)
    contractaAmount: {
      type: String,
      require: true,
    },
    //原合同金额(元)
    originalContract: {
      type: String,
      require: true,
    },
    //收（付）款类型
    PaymentTypeType: {
      type: String,
      require: true,
    },
    //收付款状态
    PaymentStateType: {
      type: String,
      require: true,
    },
  },
  methods: {
    //增加期数
    periodsNumber(res) {
      console.log(this.tableData);
      let tableForm = {};
      this.tableData.push(tableForm);
      console.log(this.tableData);
    },
    //删除列表项
    DeleteByIndex(res) {
      this.tableData.splice(res, 1);
    },
    //前往首页
    goToFirst() {
      console.log("前往首页");
      this.$emit("goToFirst");
    },
    //预览
    Preview(value) {
      let url = process.env.VUE_APP_BASE_API + value;
      console.log(url);
      window.open(url, "_blank");
    },
    async copyToClipboard(str) {
      const text = str.trim(); // 去除多余空白
      try {
        await navigator.clipboard.writeText(text);
        this.$modal.msgSuccess("复制成功");
        return;
      } catch (error) {
        console.error(error);
      }
      const el = document.createElement("textarea");
      console.log("11111");
      el.value = text;
      el.setAttribute("readonly", "");
      el.style.position = "absolute";
      el.style.left = "-9999px";
      document.body.appendChild(el);
      const selected =
        document.getSelection().rangeCount > 0
          ? document.getSelection().getRangeAt(0)
          : false;
      el.select();
      document.execCommand("copy");
      document.body.removeChild(el);
      if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
      }
      this.$modal.msgSuccess("复制成功");
    },
  },
};
</script>

<style scoped>
.demo-dynamic {
  padding: 20px;
}
.bill {
  margin-top: 10px;
  white-space: nowrap;
  padding: 10px 8px;
  text-align: center;
  background-color: #f4f4f4;
  color: #fff;
  border-radius: 5px;
  margin-right: 20px;
  color: #5297f7;
  position: relative;
  display: flex;
  align-items: center;
}
.Mask {
  display: none !important;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  background-color: rgb(33, 38, 41);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: 5px;
  opacity: 0.8;
}
.bill:hover .Mask {
  display: flex !important;
}
</style>
